<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>To-do List</title>
    <link type="text/css" rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css">
</head>

<body>
<div class="ui container">
    <h4>To-dos for <span th:text="${#authentication?.name}">John Doe</span></h4>
    <table class="ui celled table">
        <thead>
        <tr>
            <th class="three wide">Owner</th>
            <th class="five wide">To-do</th>
            <th class="two wide">Completed</th>
            <th class="six wide">&nbsp;</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="todo : ${todos}">
            <td th:text="${todo.owner}">John Doe</td>
            <td th:text="${todo.description}">Some Task Description</td>
            <td th:text="${todo.completed}">Not Even Close</td>
            <td>
                    <span th:if="${!todo.completed}">
                        <form th:action="@{/todos/{id}/completed(id=${todo.id})}" action="#" method="post"
                              style="float: left;">
                            <input type="hidden" name="_method" value="PUT"/>
                            <button class="ui mini green icon button"><i class="check circle icon"></i></button>
                        </form>
                    </span>
                <form th:action="@{/todos/{id}(id=${todo.id})}" action="#" method="post" style="float: left;">
                    <input type="hidden" name="_method" value="DELETE"/>
                    <button class="ui mini red icon button"><i class="remove circle icon"></i></button>
                </form>
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <a class="ui mini icon button" th:href="@{/todos/new}" href="#">New To-do <i
                        class="add circle icon"></i></a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
